<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SLIDESHOW CROSSFADE</title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../lib/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="../../js/rollover.js" type="text/javascript"></script>
<script src="../../js/ss_crossfade.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
var slideObj;
Event.observe(window,'load',function() {
	var option = {imageId:"container", loop:true, interval:4, duration:0.8, 
					textId:'text-ct', paginate:true};
	slideObj = new Crossfade("images/list.xml",option); 
});
</script>
<style>
#container {
/* 画像のコンテナは幅、高さを必ず指定します。*/
width:480px;height:270px;
/*border:1px solid black;*/
background-color:black;
}
#text-ct {
color:#fff;
width:470px;height:26px;
position:absolute;
left:0px;top:250px;
z-index:1;
font-family:sans-serif;
font-size:12px;
line-height:110%;
background:url(images/fifty.png);
padding:4px 5px 0 5px;
}

#text-ct span {
/* 実際のテキストはspan内 */
}
/* navi option */
#navbuttons {
clear:both;
padding:0;margin:0;
width:480px;height:26px;
background-color:black;
/*border:1px solid black;*/
}
#navbuttons div {
float:left;
color:#ccc;
padding:5px 0 0 10px;
font-size:12px;
font-family:sans-serif;
}
#navbuttons img {
border:0;
float:right;
margin-top:3px;
margin-right:4px;
}
</style>
</head>
<body>

<div style="width:480px;margin:30px;">
    <div id="container">
        <div id="text-ct"></div>
    </div>

	<div id="navbuttons">
	<div><!--title etc-->KYOTO JAPAN</div>
	<a href="javascript:slideObj.nextSlide()"><img src="images/next.gif" class="imgover" alt="次へ"/></a>
    <a href="javascript:slideObj.startSlide()"><img src="images/play.gif" class="imgover" alt="再生"/></a>
    <a href="javascript:slideObj.stopSlide()"><img src="images/stop.gif" class="imgover" alt="停止"/></a>
	<a href="javascript:slideObj.prevSlide()"><img src="images/prev.gif" class="imgover" alt="前へ"/></a>
	</div>
</div>

</body>
</html>
